// wx://form-field
// 使自定义组件有类似于表单控件的行为。 form 组件可以识别这些自定义组件，并在 submit 事件中返回组件的字段名及其对应字段值
const bxItem = require('./bx-item');

module.exports = Behavior({
  behaviors: ['wx://form-field', bxItem],
  /**
   * 组件的属性列表
   */
  properties: {
    /** 之所以将所有信息以对象的方式传入，是为了后面的数据验证 */
    props: {
      type: Object,
      observer(props) {
        if (props.value === undefined) {
          props.value = ""
          props.text = ""
        }
        this.setData({
          ...this.data, //默认值
          title: '选择' + props.label, //默认值
          placeholder: props.placeholder || '请选择' + props.label, //默认值
          ...props, //新值
        });
      }
    },
    columns: {
      type: Array,
      value: [],
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    title: undefined,
    show: false,
    text: ''
  },

  methods: {
    /** 弹出选择框 */
    onShowPicker(e) {
      this.setData({
        show: true
      });
    },

    /** 取消选择框 */
    onCancel: function () {
      this.onChange({
        detail: this.data.value,
      });

      this.setData({
        show: false
      });
    },
    /** 确认选择器 */
    onConfirm: function (e) {
      this.onChange({
        detail: e.detail.value.value,
      });

      this.setData({
        show: false,
        text: e.detail.value.text,
      });
    },
  },

  observers: {
    'columns,value': function (columns, value) {
      /** 当有初始value时，给text赋值 */
      if (columns && columns.length > 0 && value !== null && value !== undefined) {
        const f = columns.find(i => i.value === value);
        if (f) {
          this.setData({
            text: f.text
          });
        }
      }
    },
  },
})